<template>
  <div>
    <nav class="nav">
      <ul>
        <li>
          <span @click="addClick(0,'compHome')" :class="index == 0 ? 'active':''">
            <div class="top">
              <span :class="[iconfont,iconHome,index == 0 ? 'active':'']"></span>
            </div>
            <div class="bottom">首页</div>
          </span>
        </li>
        <li>
          <span @click="addClick(1,'compFenlei')" :class="index == 1 ? 'active':''">
            <div class="top">
              <span :class="[iconfont,iconFenlei,index == 1 ? 'active':'']"></span>
            </div>
            <div class="bottom">分类</div>
          </span>
        </li>
        <li>
          <span @click="addClick(2,'compMy')" :class="index == 2 ? 'active':''">
            <div class="top">
              <span :class="[iconfont,iconMy,index == 2 ? 'active':'']"></span>
            </div>
            <div class="bottom">我的</div>
          </span>
        </li>
      </ul>
    </nav>

    <transition
      :duration="{ enter: 800, leave: 120 }"
      enter-active-class="animate__animated animate__fadeInRight"
      enter-to-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutLeft"
      leave-to-class="animate__animated animate__fadeOutLeft"
    >
      <component :is="compName"></component>
    </transition>
  </div>
</template>

<script>
import compHome from '@/views/gmHome.vue'
import compFenlei from '@/views/gmFenlei.vue'
import compMy from '@/views/gmMy.vue'

export default {
  name: "Nav",
  components:{
    compHome,
    compFenlei,
    compMy
  },
  data() {
    return {
      iconfont:"iconfont",
      iconHome:"icon-home",
      iconFenlei:"icon-fenlei",
      iconMy:"icon-my",
      compName: "compHome",
      index: 0,
    };
  },
  methods: {
    addClick(i, cn) {
      this.index = i; // 设置索引值
      this.compName = cn; // 设置组件名称
    },
  },
  created(){
    localStorage.setItem("dataArr",JSON.stringify([]));
  }
};
</script>

<style lang="scss" scoped>
$color: #dc912c;
.nav {
  position: fixed;
  height: 55px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  z-index: 99999;
  border-top: 1px solid #f0f0f0;
  ul {
    display: flex;
    height: 55px;
    width: 100%;
    li {
      flex-basis: 33.3333%;
      flex-grow: 1;
      flex-shrink: 0;
      text-align: center;
      span {
        display: block;
        color: #666;
        .top {
          height: 35px;
          line-height: 35px;
          span {
            font-size: 22px;
          }
        }
        .bottom {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
        }
      }
      .active {
        color: $color;
      }
    }
  }
}
</style>